<template>
	<el-card>
		<el-form label-width="138px" :model="state.formBz" :label-position="labelPosition">
			<el-row :gutter="10">
				<el-col :span="8">
					<el-form-item label="标准名称">
						<el-input v-model="state.formBz.standardName" clearable />
					</el-form-item>
					<el-form-item label="被替代标准名称">
						<el-input v-model="state.formBz.substitutedName" clearable />
					</el-form-item>
					<el-form-item label="标准序号">
						<el-input v-model="state.formBz.standardNumber" clearable />
					</el-form-item>
					<el-form-item label="发布日期">
						<el-date-picker v-model="state.formBz.publishTime" type="date" format="YYYY-MM-DD" clearable value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="废止时间">
						<el-date-picker v-model="state.formBz.abolishTime" type="date" format="YYYY-MM-DD" clearable value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="标准状态">
						<el-select v-model="state.bzztChecked" clearable>
							<el-option v-for="item in state.bzztList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="专题分类">
						<el-tree-select
							ref="ztTreeRef"
							v-model="state.ztflChecked"
							:data="state.specialCategories"
							node-key="id"
							multiple
							check-strictly
							:props="state.treeProps"
							:render-after-expand="false"
							show-checkbox
							clearable
							@check-change="handleCheckChangeTwo"
						/>
					</el-form-item>

					<el-form-item label="管理条线分类">
						<el-select v-model="state.glxtChecked" multiple clearable>
							<el-option v-for="item in state.glxtList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="标准国际化领域标签">
						<el-select v-model="state.bzgjhChecked" clearable>
							<el-option v-for="item in state.bzgjhList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="英文名称">
						<el-input v-model="state.formBz.standardEnName" clearable />
					</el-form-item>
					<el-form-item label="备案号">
						<el-input v-model="state.formBz.recordNumber" clearable />
					</el-form-item>
					<el-form-item label="标准代次">
						<el-input v-model="state.formBz.version" clearable />
					</el-form-item>
					<el-form-item label="批准时间">
						<el-date-picker v-model="state.formBz.approvalTime" type="date" format="YYYY-MM-DD" clearable value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="强制性分类">
						<el-select v-model="state.qzxflChecked" clearable>
							<el-option v-for="item in state.qzxflList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="编制状态分类">
						<el-select v-model="state.bzztflChecked" clearable>
							<el-option v-for="item in state.bzztflList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="工程专业分类">
						<el-select v-model="state.gczyChecked" multiple clearable>
							<el-option v-for="item in state.gczyList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="建筑类型分类">
						<el-select v-model="state.jzlbChecked" clearable>
							<el-option v-for="item in state.jzlbList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="热门领域标签">
						<el-select v-model="state.rmlyChecked" clearable>
							<el-option v-for="item in state.rmlyList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="标准号">
						<el-input v-model="state.formBz.seqNo" clearable />
					</el-form-item>
					<el-form-item label="被替代标准编号">
						<el-input v-model="state.formBz.substitutedNo" clearable />
					</el-form-item>
					<el-form-item label="立项时间">
						<el-date-picker v-model="state.formBz.initiateTime" type="date" format="YYYY-MM-DD" clearable value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="实施时间">
						<el-date-picker v-model="state.formBz.implementTime" type="date" format="YYYY-MM-DD" clearable value-format="YYYY-MM-DD" />
					</el-form-item>
					<el-form-item label="标准(类别)等级标签 ">
						<el-select v-model="state.bzlbChecked" clearable>
							<el-option v-for="item in state.bzlbList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="基础分类">
						<!-- :render-after-expand="false"-->
						<el-tree-select
							ref="jcTreeRef"
							v-model="state.bcChecked"
							:data="state.basicCategories"
							highlight-current
							check-strictly
							:props="state.treeProps"
							clearable
						/>
					</el-form-item>

					<el-form-item label="工程全生命周期分类">
						<el-select v-model="state.gcsmzqChecked" multiple clearable>
							<el-option v-for="item in state.gcsmzqList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
					<el-form-item label="长三角区域标准分类">
						<el-select v-model="state.csjqyChecked" clearable>
							<el-option v-for="item in state.csjqyList" :key="item.id" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-button type="primary" @click="handleSubmit">提交</el-button>
	</el-card>
</template>

<script lang="ts" setup>
import { categoryDetailApi, categorysaveOrSubmitApi } from '@/api/standard/maintenance/index'
import type { FormProps } from 'element-plus'
import { ElMessage, ElTree } from 'element-plus'
import { reactive, ref } from 'vue'
const labelPosition = ref<FormProps['labelPosition']>('right')

const jcTreeRef = ref<InstanceType<typeof ElTree>>()
const ztTreeRef = ref<InstanceType<typeof ElTree>>()

const state = reactive({
	formBz: {
		standardName: '',
		substitutedName: '',
		standardNumber: '',
		publishTime: '',
		abolishTime: '',

		standardEnName: '',
		recordNumber: '',
		version: '',
		approvalTime: '',

		seqNo: '',
		substitutedNo: '',
		initiateTime: '',
		implementTime: '',

		labels: [],
		basicCategories: [],
		specialCategories: []
	},
	newBasic: [],
	basicCategories: [],
	bcChecked: '',

	newCates: [],
	specialCategories: [],
	ztflChecked: [],

	labels: [],

	bzztList: [],
	bzztChecked: '',

	bzztflList: [],
	bzztflChecked: '',

	qzxflList: [],
	qzxflChecked: '',

	bzlbList: [],
	bzlbChecked: '',

	gczyList: [],
	gczyChecked: [],

	gcsmzqList: [],
	gcsmzqChecked: [],

	glxtList: [],
	glxtChecked: [],

	jzlbList: [],
	jzlbChecked: '',

	csjqyList: [],
	csjqyChecked: '',

	bzgjhList: [],
	bzgjhChecked: '',

	rmlyList: [],
	rmlyChecked: '',

	treeProps: {
		value: 'id',
		label: 'standardName',
		children: 'children'
		// hasChosen: 'hasChosen',
		// pid: 'pid'
	},
	nodeClick: '',
	detailObj: ''
})
const handleNodeClick = data => {
	state.newBasic = JSON.parse(JSON.stringify(state.basicCategories))
	updateNodeInTree(state.newBasic, data.id)
}

const handleCheckChangeTwo = (node, chekced) => {
	// console.log(node, chekced)
	// console.log(ztTreeRef.value!.getCheckedNodes(false, false))
}

const ztMethods = () => {
	state.newCates = JSON.parse(JSON.stringify(state.specialCategories))
	var checkedArr = ztTreeRef.value!.getCheckedNodes(false, false)
	if (checkedArr && checkedArr.length > 0) {
		checkedArr.forEach(element => {
			updateNodeInTree(state.newCates, element.id)
		})
	}
}

const updateNodeInTree = (tree, id) => {
	tree.forEach(node => {
		if (node.id === id) {
			node.hasChosen = true
		} else if (node.children) {
			updateNodeInTree(node.children, id) // 递归调用
		}
	})
}

const init = (b, s, labels) => {
	state.basicCategories = b // 基础分类
	state.specialCategories = s // 专题分类

	state.bzztList = labelsArr(2, '标准状态', labels)
	state.bzztflList = labelsArr(3, '编制状态分类', labels)
	state.qzxflList = labelsArr(4, '强制性分类', labels)
	state.bzlbList = labelsArr(1, '标准(类别)等级标签', labels)
	state.gczyList = labelsArr(7, '工程专业分类', labels)
	state.gcsmzqList = labelsArr(5, '工程全生命周期分类', labels)

	state.glxtList = labelsArr(8, '管理条线分类', labels)
	state.jzlbList = labelsArr(6, '建筑类型分类', labels)
	state.csjqyList = labelsArr(14, '长三角区域标准分类', labels)
	state.bzgjhList = labelsArr(12, '标准国际化领域标签', labels)
	state.rmlyList = labelsArr(13, '热门领域标签', labels)
	// console.log(state.bzztList)
}

const labelsArr = (type: String | Number, name: String, arrList) => {
	var retArr = []
	arrList.forEach(item => {
		if (Number(item.type) == Number(type)) {
			retArr = item.options
		}
	})
	return retArr
}
// 获取详情接口
const initDetail = async (detail: any) => {
	var params = {
		systemId: detail.id,
		projectInfoId: ''
	}
	await categoryDetailApi(params).then(res => {
		state.detailObj = res.data
		const {
			standardName,
			substitutedName,
			standardNumber,
			publishTime,
			abolishTime,
			standardEnName,
			recordNumber,
			version,
			approvalTime,
			seqNo,
			substitutedNo,
			initiateTime,
			implementTime
		} = res.data
		state.formBz = {
			standardName,
			substitutedName,
			standardNumber,
			publishTime,
			abolishTime,
			standardEnName,
			recordNumber,
			version,
			approvalTime,
			seqNo,
			substitutedNo,
			initiateTime,
			implementTime
		}
		state.bzlbChecked = detailToView(res.data.labels, 1, '标准(类别)等级标签')[0]
		state.bzztChecked = detailToView(res.data.labels, 2, '标准状态')[0]
		state.bzztflChecked = detailToView(res.data.labels, 3, '编制状态分类')[0]
		state.qzxflChecked = detailToView(res.data.labels, 4, '强制性分类')[0]
		state.gcsmzqChecked = detailToView(res.data.labels, 5, '工程全生命周期分类')
		state.jzlbChecked = detailToView(res.data.labels, 6, '建筑类型分类')[0]
		state.gczyChecked = detailToView(res.data.labels, 7, '工程专业分类')
		state.glxtChecked = detailToView(res.data.labels, 8, '管理条线分类')
		state.bzgjhChecked = detailToView(res.data.labels, 12, '标准国际化领域标签')[0]
		state.rmlyChecked = detailToView(res.data.labels, 13, '热门领域标签')[0]
		state.csjqyChecked = detailToView(res.data.labels, 14, '长三角区域标准分类')[0]
	})
}
const emit = defineEmits(['update:message'])
const handleSubmit = async () => {
	state.formBz.labels = []
	var result2 = formResult(2, '标准状态', state.bzztList, [state.bzztChecked])
	var result8 = formResult(8, '管理条线分类', state.glxtList, state.glxtChecked)
	var result12 = formResult(12, '标准国际化领域标签', state.bzgjhList, [state.bzgjhChecked])

	var result4 = formResult(4, '强制性分类', state.qzxflList, [state.qzxflChecked])
	var result3 = formResult(3, '编制状态分类', state.bzztflList, [state.bzztflChecked])
	var result7 = formResult(7, '工程专业分类', state.gczyList, state.gczyChecked)
	var result6 = formResult(6, '建筑类型分类', state.jzlbList, [state.jzlbChecked])
	var result13 = formResult(13, '热门领域标签', state.rmlyList, [state.rmlyChecked])

	var result1 = formResult(1, '标准(类别)等级标签', state.bzlbList, [state.bzlbChecked])
	var result5 = formResult(5, '工程全生命周期分类', state.gcsmzqList, state.gcsmzqChecked)
	var result14 = formResult(14, '长三角区域标准分类', state.csjqyList, [state.csjqyChecked])

	state.formBz.labels.push(result1)
	state.formBz.labels.push(result2)
	state.formBz.labels.push(result3)
	state.formBz.labels.push(result4)
	state.formBz.labels.push(result5)
	state.formBz.labels.push(result6)
	state.formBz.labels.push(result7)
	state.formBz.labels.push(result8)
	state.formBz.labels.push(result12)
	state.formBz.labels.push(result13)
	state.formBz.labels.push(result14)

	state.formBz.basicCategories = state.newBasic
	ztMethods()
	state.formBz.specialCategories = state.newCates
	sumbitForm()
}
const findById = (array, id) => {
	return array.find(item => item.id === id)
}
// 新增数据封装--多选，单选 options都是选择的id
const formResult = (type, typeName, all, options: any) => {
	var newobj = {
		type: type,
		typeName: typeName,
		options: [
			{
				id: '',
				type: '',
				name: ''
			}
		]
	}
	if (all.length == 0 || options.length == 0) {
		// 下拉数据没有，没有选择 两种
		newobj.options = []
	} else {
		var arr = []
		options.forEach(id => {
			arr.push(findById(all, id))
		})
		newobj.options = arr
	}
	return newobj
}

// 详情数据处理
const detailToView = (labels, type, name) => {
	// 各种下拉数据
	var checkedArr = []
	labels.forEach(item => {
		if (Number(item.type) == Number(type)) {
			// checked = item.options
			var arr = []
			item.options.forEach(item => {
				arr.push(item.id)
			})
			checkedArr = arr
		}
	})
	return checkedArr
}

const sumbitForm = async () => {
	await categorysaveOrSubmitApi(state.formBz).then(res => {
		ElMessage.success({
			message: '操作成功',
			duration: 500
		})
		emit('update:message', res.data)
		resetForm()
	})
}
const resetForm = () => {
	var linshi = {
		standardName: '',
		substitutedName: '',
		standardNumber: '',
		publishTime: '',
		abolishTime: '',

		standardEnName: '',
		recordNumber: '',
		version: '',
		approvalTime: '',

		seqNo: '',
		substitutedNo: '',
		initiateTime: '',
		implementTime: '',

		labels: [
			{
				type: '',
				typeName: '',
				options: []
			}
		]
	}
	state.formBz = { ...linshi }
}
defineExpose({
	init,
	initDetail
})
</script>
